<template>
	<view :data-theme="theme">
		<view class="integral-details">
			<view class="header">
				<view class="currentScore">当前积分</view>
				<view class="scoreNum">{{ integral.integral || 0 }}</view>
				<view class="line"></view>
				<view class="nav acea-row">
					<view class="item">
						<view class="num">{{ integral.settledIntegral || 0 }}</view>
						<view>累计积分</view>
					</view>
					<view class="item">
						<view class="num">{{ integral.useIntegral || 0 }}</view>
						<view>累计消费</view>
					</view>
					<view class="item">
						<view class="num">{{ integral.freezeIntegral || 0 }}</view>
						<view>冻结积分</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="nav acea-row">
					<view class="item acea-row row-center-wrapper" :class="current == index ? 'on' : ''" v-for="(item, index) in navList" :key="index" @click="nav(index)">
						<text class="iconfont" :class="item.icon"></text>
						{{ item.name }}
					</view>
				</view>
				<view class="list" :hidden="current != 0">
					<view class="tip acea-row row-middle">
						<text class="iconfont icon-shuoming"></text>
						提示：积分数值的高低会直接影响您的会员等级
					</view>
					<view class="item acea-row row-between-wrapper" v-for="(item, index) in integralList" :key="index">
						<view>
							<view class="state">{{ item.title }}</view>
							<view>{{ item.updateTime }}</view>
						</view>
						<view class="num font_color" v-if="item.type === 1">+{{ item.integral }}</view>
						<view class="num" v-else>-{{ item.integral }}</view>
					</view>
					<view class="loadingicon acea-row row-center-wrapper" v-if="integralList.length > 0">
						<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
						{{ loadTitle }}
					</view>
					<view class="noCart" v-if="integralList.length == 0">
						<view class="pictrue">
							<image :src="urlDomain + 'crmebimage/presets/noJilu.png'"></image>
							<view class="default_txt">暂无积分记录哦~</view>
						</view>
					</view>
				</view>
				<view class="list2" :hidden="current != 1">
					<navigator class="item acea-row row-between-wrapper" open-type="switchTab" hover-class="none" url="/pages/index/index">
						<view class="pictrue">
							<image src="../static/images/score.png"></image>
						</view>
						<view class="name">购买商品可获得积分奖励</view>
						<view class="earn">赚积分</view>
					</navigator>
					<navigator class="item acea-row row-between-wrapper" hover-class="none" url="/pages/merchant/user_sgin/index">
						<view class="pictrue">
							<image src="../static/images/score.png"></image>
						</view>
						<view class="name">每日签到可获得积分奖励</view>
						<view class="earn">赚积分</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { postIntegralUser, getIntegralList } from '@/api/user.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
let app = getApp();
export default {
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			navList: [
				{
					name: '分值明细',
					icon: 'icon-mingxi'
				},
				{
					name: '分值提升',
					icon: 'icon-tishengfenzhi'
				}
			],
			current: 0,
			page: 1,
			limit: 10,
			integralList: [],
			integral: {},
			loadend: false,
			loading: false,
			loadTitle: '加载更多',
			theme: app.globalData.theme
		};
	},
	computed: mapGetters(['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getUserInfo();
					this.getIntegralList();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			this.getUserInfo();
			this.getIntegralList();
		} else {
			toLogin();
		}
	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		this.getIntegralList();
	},
	methods: {
		getUserInfo: function () {
			let that = this;
			postIntegralUser().then(function (res) {
				that.$set(that, 'integral', res.data);
			});
		},

		/**
		 * 获取积分明细
		 */
		getIntegralList: function () {
			let that = this;
			if (that.loading) return;
			if (that.loadend) return;
			that.loading = true;
			that.loadTitle = '';
			getIntegralList({
				page: that.page,
				limit: that.limit
			}).then(
				function (res) {
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.integralList = that.$util.SplitArray(list, that.integralList);
					that.$set(that, 'integralList', that.integralList);
					that.page = that.page + 1;
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? '哼~😕我也是有底线的~' : '加载更多';
				},
				function (res) {
					this.loading = false;
					that.loadTitle = '加载更多';
				}
			);
		},
		nav: function (current) {
			this.current = current;
		}
	}
};
</script>

<style scoped lang="scss">
.integral-details .header {
	background-image: url('');
	background-repeat: no-repeat;
	background-size: 100% 218rpx;
	background-position: center bottom;
	width: 100%;
	height: 460rpx;
	font-size: 72rpx;
	color: #fff;
	padding: 31rpx 0 45rpx 0;
	box-sizing: border-box;
	text-align: center;
	font-family: 'Guildford Pro';
	@include main_bg_color(theme);
}

.integral-details .header .currentScore {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	margin-bottom: 11rpx;
}

.integral-details .header .scoreNum {
	font-family: 'Guildford Pro';
}

.integral-details .header .line {
	width: 60rpx;
	height: 3rpx;
	background-color: #fff;
	margin: 20rpx auto 0 auto;
}

.integral-details .header .nav {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
	flex: 1;
	margin-top: 35rpx;
}

.integral-details .header .nav .item {
	width: 33.33%;
	text-align: center;
}

.integral-details .header .nav .item .num {
	color: #fff;
	font-size: 40rpx;
	margin-bottom: 5rpx;
	font-family: 'Guildford Pro';
}

.integral-details .wrapper .nav {
	flex: 1;
	width: 690rpx;
	border-radius: 20rpx 20rpx 0 0;
	margin: -96rpx auto 0 auto;
	background-color: #f7f7f7;
	height: 96rpx;
	font-size: 30rpx;
	color: #bbb;
}

.integral-details .wrapper .nav .item {
	text-align: center;
	width: 50%;
}

.integral-details .wrapper .nav .item.on {
	background-color: #fff;
	@include main-color(theme);
	font-weight: bold;
	border-radius: 20rpx 0 0 0;
}

.integral-details .wrapper .nav .item:nth-of-type(2).on {
	border-radius: 0 20rpx 0 0;
}

.integral-details .wrapper .nav .item .iconfont {
	font-size: 38rpx;
	margin-right: 10rpx;
}

.integral-details .wrapper .list {
	background-color: #fff;
	padding: 24rpx 30rpx;
}

.integral-details .wrapper .list .tip {
	font-size: 25rpx;
	width: 690rpx;
	height: 60rpx;
	border-radius: 50rpx;
	background-color: #fff5e2;
	border: 1rpx solid #ffeac1;
	color: #c8a86b;
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
}

.integral-details .wrapper .list .tip .iconfont {
	font-size: 35rpx;
	margin-right: 15rpx;
}

.integral-details .wrapper .list .item {
	height: 124rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 24rpx;
	color: #999;
}

.integral-details .wrapper .list .item .state {
	font-size: 28rpx;
	color: #282828;
	margin-bottom: 8rpx;
}

.integral-details .wrapper .list .item .num {
	font-size: 36rpx;
	font-family: 'Guildford Pro';
}

.integral-details .wrapper .list2 {
	background-color: #fff;
	padding: 24rpx 0;
}

.integral-details .wrapper .list2 .item {
	background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
	width: 690rpx;
	height: 180rpx;
	position: relative;
	border-radius: 10rpx;
	margin: 0 auto 20rpx auto;
	padding: 0 25rpx 0 180rpx;
	box-sizing: border-box;
}

.integral-details .wrapper .list2 .item .pictrue {
	width: 90rpx;
	height: 150rpx;
	position: absolute;
	bottom: 0;
	left: 45rpx;
}

.integral-details .wrapper .list2 .item .pictrue image {
	width: 100%;
	height: 100%;
}

.integral-details .wrapper .list2 .item .name {
	width: 285rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #c8a86b;
}

.integral-details .wrapper .list2 .item .earn {
	font-size: 26rpx;
	color: #c8a86b;
	border: 2rpx solid #c8a86b;
	text-align: center;
	line-height: 52rpx;
	height: 52rpx;
	width: 160rpx;
	border-radius: 50rpx;
}

.font_color {
	@include price_color(theme);
}
.noCart {
	margin-top: -62rpx;
	padding-top: 0.1rpx;
	height: 800rpx;
}

.noCart .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}
.default_txt {
	font-size: 26rpx;
	color: #999;
	text-align: center;
}
.list {
	min-height: 72vh;
}
</style>
